<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>计算距离</title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		window._AMapSecurityConfig = {
			securityJsCode: "dba528dcd7d571a231a330b532a6cf61",
		};
	</script>
	<script type="text/javascript"
			src="https://webapi.amap.com/maps?v=2.0&key=4fbb5ae31246fb4337678f7649c87b1b&plugin=AMap.Driving"></script>
	<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
	<style type="text/css">
		#container {
			width: 782px;
			height: 440px;
			overflow: hidden;
		}

		.layui-form-item {
			margin-bottom: 0;
		}

		.layui-form-item {
			clear: both;
		}

		.layui-inline {
			margin-bottom: 5px;
			margin-right: 10px;
		}

		.layui-inline {
			vertical-align: middle;
		}

		.layui-inline {
			position: relative;
		}

		.layui-inline {
			display: inline-block;
		}

		.layui-input {
			display: block;
			width: 100%;
			padding-left: 10px;
		}

		.layui-input {
			height: 32px;
			line-height: 1.3;
			border-width: 1px;
			border-style: solid;
			background-color: #fff;
			border-radius: 2px;
		}

		.layui-btn {
			margin-left: 10px;
			transition: none;
		}

		.layui-btn {
			display: inline-block;
			height: 32px;
			line-height: 32px;
			background-color: #009688;
			color: #fff;
			white-space: nowrap;
			text-align: center;
			font-size: 12px;
			border: none;
			border-radius: 2px;
			cursor: pointer;
		}

		.layui-field-title {
			border-width: 1px 0 0;
		}

		.layui-elem-field {
			padding: 0;
			border-style: solid;
		}

		fieldset {
			display: block;
			margin-inline-start: 2px;
			margin-inline-end: 2px;
			padding-block-start: 0.35em;
			padding-inline-start: 0.75em;
			padding-inline-end: 0.75em;
			padding-block-end: 0.625em;
			min-inline-size: min-content;
		}

		.layui-elem-field legend {
			margin-left: 20px;
			padding: 0 10px;
			font-size: 12px;
			font-weight: 600;
		}

		legend {
			display: block;
			padding-inline-start: 2px;
			padding-inline-end: 2px;
			border-width: initial;
			border-style: none;
			border-color: initial;
			border-image: initial;
		}
	</style>
</head>
<body>
<div class="layui-form-item">
	<div class="layui-inline">
		<input id="kilometer" class="layui-input" type="text" placeholder="输入公里数"/>
	</div>
	<div class="layui-inline">
		<button id="confirm" type="button" class="layui-btn" onclick="confirm()">确定</button>
	</div>
	<div class="layui-inline">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
			<legend>公里数：<span id="kilometerts">0</span></legend>
		</fieldset>
	</div>
	<div class="layui-inline">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
			<legend>时间：<span id="timetongxing">0</span>分钟</legend>
		</fieldset>
	</div>
</div>
<div id='container'></div>
<!--<div id="panel"></div>-->
</body>
<script type="text/javascript">
	// 获取 URL 参数的函数
	function getUrlParam(name) {
		// 利用正则表达式获取 URL 参数的值
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		if (r != null) {
			return unescape(r[2]);
		} else {
			return null;
		}
	};

	// 匹配 URL 中的查询参数
	function GetUrlByParamName(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		var URL = decodeURI(window.location.search);
		var r = URL.substr(1).match(reg);
		if (r != null) {
			//decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码
			return decodeURI(r[2]);
		}
		;
		return null;
	};

	// 获取 URL 参数中的经纬度和公里数
	var set_longitude = GetUrlByParamName("set_longitude");
	var set_latitude = GetUrlByParamName("set_latitude");
	// 如果发货地址经纬度不存在，弹出警告
	if (set_longitude == null || set_longitude == '') {
		alert('计算失败！发货地址经纬度不存在！');
	}

	var get_longitude = GetUrlByParamName("get_longitude");
	var get_latitude = GetUrlByParamName("get_latitude");
	// 如果收货地址经纬度不存在，弹出警告
	if (get_longitude == null || get_longitude == '') {
		alert('计算失败！收货地址经纬度不存在！');
	}

	var kilometer = GetUrlByParamName("kilometer");
	// 设置输入框的值为从 URL 参数获取的公里数
	$("#kilometer").val(kilometer)

	var map = new AMap.Map("container", {
		viewMode: '2D',
		zoom: 11,
		resizeEnable: true
	});

	var drivingOption = {
		policy: AMap.DrivingPolicy.LEAST_TIME,
		ferry: 1,
		map: map,
	}

	// 构造路线导航类
	var driving = new AMap.Driving(drivingOption)

	// 根据起终点经纬度规划驾车导航路线
	driving.search(new AMap.LngLat(set_longitude, set_latitude), new AMap.LngLat(get_longitude, get_latitude), function (status, result){
		if (status === 'complete') {

			// 获取路程和时间
			var distance = result.routes[0].distance / 1000; // 距离转换为公里
			var duration = Math.floor(result.routes[0].time / 60); // 时间转换为分钟

			// 更新页面上的显示
			document.getElementById("kilometerts").textContent = distance.toFixed(2);
			document.getElementById("timetongxing").textContent = duration;
			$("#kilometer").val(distance.toFixed(2));

			log.success('绘制驾车路线完成')
		} else {
			log.error('获取驾车数据失败：' + result)
		}
	});

	// 确定按钮的事件处理函数
	function confirm() {
		// 将用户输入的公里数存储到父页面的 BasicAddressInfoDlg 对象中
		parent.BasicAddressInfoDlg.data.kilometer = $("#kilometer").val();
		var Index = parent.layer.getFrameIndex(window.name); // 获取当前页面的索引
		parent.layer.close(Index); // 关闭当前页面
	}

	// 返回按钮的事件处理函数
	function backupPage() {
		var Index = parent.layer.getFrameIndex(window.name);
		parent.layer.close(Index);
	}
</script>
</html>
